<template>
<div>
    <div class="order-form">
        <div class="order-form-left">
            <router-link to='/detail'>
                <div class="btn-back"></div>
            </router-link>
        </div>
        <div class="order-form-title clearfix"><h4>提交订单</h4></div>
    </div>
    <div class="price-title">槟果の茶招牌饮品7选1</div>
    <div class="price-box">
        <input type="text" placeholder="请输入手机号" v-model="phone"></input>
        <input type="text" placeholder="请输入地址" v-model="address"></input>
        <div class="price-div">单价：<span>9.9元</span></div>
        <div class="price-div">数量：
            <div class="number">
                <button class="sub" @click="minus">-</button>
                <input type="text" class="indexs" disabled="true"  v-model="number" @keyup="fixNumber"></input>
                <button class="add" @click="add">+</button>
            </div>
        </div>
        <div class="price-div">总价：<span>{{price}}元</span></div>
        <button class="buy" @click="btnbuy">确认购买</button>
    </div>
    <my-dialog :is-show="isShowPayDialog">
        <table class="buy-dialog-table">
            <tr>
                <th>购买数量</th>
                <th>总价</th>
            </tr>
            <tr>
                <td>{{number}}</td>
                <td>{{price}}</td>
            </tr>
        </table>
        <h3 class="buy-dialog-title">请选择银行</h3>
            <ul class="bankpics">
                <li class="bankpic1"></li>
                <li class="bankpic2"></li>
                <li class="bankpic3"></li>
                <li class="bankpic4"></li>
            </ul>
        <bank-chooser></bank-chooser>
        <div class="buy-dialog-btn" @click="confirmBuy">
                确认购买
        </div>
    </my-dialog>
</div>
</template>
<script>
import MyDialog from '../components/buybase/mydialog'
export default{
    components:{
        MyDialog
    },
    props:{
        max:{
            type:Number,
            default:20
        },
        min:{
            type:Number,
            default:1
        }
    },
    data(){
        return{
            number:this.min,
            price:9.9,
            isShowPayDialog:false
        }
    },
    watch:{
        number(){
            this.$emit("on-change",this.number)
        }
    },
    methods:{
        fixNumber(){
            var fix
            if(typeof this.number==="string"){
                fix=Number(this.number.replace(/\D/g, ''));
            }
            else{
                fix=this.number
            }
            if(fix>this.max||fix<this.min){
                fix=this.min
            }
            this.number=fix;
            price=fix*9.9;
        },
        minus() {
            if (this.number <= this.min) {
                return
            }
            this.number--;
            var ps=0;
            ps=this.number*(9.9)+"";
            this.price=ps.slice(0,5);
        },
        add() {
            if (this.number >= this.max) {
                return
            }
            this.number++;
            var ps=0;
            ps=this.number*(9.9)+"";
            this.price=ps.slice(0,5);
        },
        btnbuy(){
            this.isShowPayDialog = true;
        },
        confirmBuy(){
            if(this.phone!=null&&this.address!=null){
                alert("购买成功！ 回到主页");
                this.$router.push({path:'/'});
            }else{
                this.isShowPayDialog = false;
                alert("手机号 地址不能为空阿 亲");
            }     
        }
    }
}
</script>
<style>
.clearfix:before ,
.clearfix:after{
    display:table;
    content:"";
}
.clearfix:after{
    clear:both;
}
*{
    margin:0;
    padding:0;
    list-style: none;
}
body {
    background-color: #f0f0f0;
    font-family: "微软雅黑";
    font-size: 14px;
    color: #333;
}
.order-form{
    background-color: #06c1ae;
    color: #fff;
    height: 50px;
    line-height: 50px;
    width: 100%;
    border-bottom: 1px solid #21897d;
}
.order-form .order-form-left{
    float:left;
    width:60px;
    height: 50px;
}
.order-form .order-form-left .btn-back{
    margin-top:15px;
    margin-left:20px;
    transform:rotate(45deg);
    width:20px;
    height:20px;
    border-left:4px solid #fff;
    border-bottom:4px solid #fff;
}
.order-form .order-form-title h4{
    line-height:50px;
    color:#fff;
    font-size:16px;
    padding-right:75px;
}
.price-title{
    margin:30px 0 15px 10px;
    font-weight:400;
    font-size:17px;
    float:left;
    padding-right:190px;
}
.price-box{
    clear:both;
}
.price-box input{
    height:45px;
    line-height:45px;
    width:100%;
    background-color:#fff;
    border:0;
    text-align:left;
    padding-left:10px;
}
.price-box .price-div{
    height:45px;
    line-height:45px;
    width:100%;
    background-color:#fff;
    border-top:1px solid #DDD8CE;
    text-align:left;
    padding-left:10px;
}
.price-box .price-div span{
    float:right;
    margin-right:30px;
}
.price-box .price-div .number{
    float:right;
    width:200px;
    height:45px;
    line-height:45px;
    position:relative;
    font-size:16px;
}
.price-box .price-div .number .sub{
    position:absolute;
    margin-top:5px;
    left:46px;
    top:0;
    width:35px;
    height:35px;
    background-color:#fff;
    border:1px solid #06c1ae;
    font-size:16px;
    border-radius:5px;
}
.price-box .price-div .number .indexs{
    position:absolute;
    margin-top:5px;
    left:88px;
    top:0;
    width:50px;
    height:35px;
    background-color:#fff;
    border:1px solid #06c1ae;
    font-size:16px;
    text-align:center;
    box-sizing: border-box;
    outline: 0;
    overflow: visible;
    padding-right:10px;
    border-radius:5px;
}
.price-box .price-div .number .add{
    position:absolute;
    margin-top:5px;
    right:20px;
    top:0;
    width:35px;
    height:35px;
    background-color:#fff;
    border:1px solid #06c1ae;
    font-size:16px;
    border-radius:5px;
}
.price-box .buy{
    width:100%;
    margin-top:60px;
    padding:13px 20px;
    border-radius:5px;
    background-color: #f90;
    color:#fff;
    border:0;
    font-size:20px;
}
.price-box div:last-child{
    border-bottom:1px solid #DDD8CE;
}
.buy-dialog-table tr th{
    padding-right:30px;
}
.buy-dialog-table tr td{
    padding-right:30px;
}
.buy-dialog-table{
    margin-bottom:20px;
}
.bankpics li{
    box-sizing: border-box;
    float:left;
    height:36px;
    width:105px;
    margin-right:5px;
    background-image:url("../assets/images/banks.png");
    cursor: pointer;
}
.bankpic1{
    background-position:-5px 0;
}
.bankpic2{
     background-position:-252px 0;
     margin-left:5px;
}
.bankpic3{
    background-position:-124px 0;
    width:110px;
    
}
.bankpic4{
     background-position:-1199px 0;
     margin-left:5px;
}
.bankpics li:hover{
    border:1px solid red;
}
.buy-dialog-btn{
    margin-top:100px;
}
</style>